<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="">
              <a-input placeholder="关键词搜索" v-model="queryParam.queryName"></a-input>
            </a-form-item>
          </a-col>

        <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-select @change="change_dingzhiInfo" v-model="select_topcategory" style="color: #a09d9d" placeholder="请选择定制项">
                  <a-select-option :value="item.id" v-for="item in categoryList" >{{ item.parameter }}</a-select-option>
               </a-select>
        </a-col>

          <a-button type="primary" @click="add_category(0)" icon="plus" style="color: #F9D532;font-size: 12px;width: 120px;height: 34px;background: #333333;border-style: none;float: left;">新增定制项</a-button>
          <a-button type="primary" @click="showdingzhi_list" style="color: #F9D532;font-size: 12px;width: 90px;height: 34px;background: #333333;border-style: none;float: left;margin-left: 10px;">刷新定制项</a-button>

          <a-col :xl="4" :lg="7" :md="8" :sm="24" style="float: right">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" style="color: #F9D532;width: 80px;height: 34px;background: #333333;border-style: none;">查询</a-button>
              <a-button type="primary" @click="searchReset" style="margin-left: 8px;width: 80px;height: 34px;background: #eae7e7;border-style: none;color: #323232">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div style="background: #f2f2f2;height: 5px;width: auto;margin-top: 10px;margin-bottom: 15px;"></div>

    <div>
      <div>
        <span style="font-size: 24px;color: #2d2d2d;font-weight: bolder">{{dingzhiName}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 30px;">序号：{{dingzhiXu}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">编号：{{dingzhiCode}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">新增时间：{{dingzhiTime}}</span>

        <div style="float: right;margin-right: 16px;margin-top: 10px;">
          <a><span style="font-size: 14px;color: #585858;margin-top: 5px;float: left" @click="() => add_category(dingzhiId)">编辑</span></a>
          <a-menu-item style="margin-left: 10px;float: left;margin-top: 4px;">
            <a-popconfirm title="确定删除该定制项吗?" @confirm="() => delete_dingzhi(select_topcategory)">
              <a style="font-size: 14px;color: #585858;">删除</a>
            </a-popconfirm>
          </a-menu-item>
        </div>
      </div>
      <div>
        <span style="font-size: 13px;color: #585858;margin-top: 10px;">备注：{{dingzhiRemark}}</span>
      </div>
    </div>

    <div style="background: #f2f2f2;height: 10px;width: auto;margin-top: 16px;margin-bottom: 30px;"></div>

    <div>
      <div style="border: none;background-color: #ffffff;padding-bottom: 28px;margin-bottom: 10px;">
        <span style="font-size: 16px;float: left;color:#000000;font-weight: bold;">参数列表</span>
        <a-button type="primary" @click="add_categoryCanshu(select_topcategory)" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;">新增参数</a-button>
<!--        <el-upload class="upload-btn"-->
<!--                   action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                   name="myFileNames"-->
<!--                   multiple-->
<!--                   :limit="3"-->
<!--                   :on-exceed="handleExceed"-->
<!--                   :file-list="fileList"-->
<!--                   :http-request="importExcel" style="float: right;margin-right: 5px">-->
<!--          <a-button type="primary" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;margin-right: 5px" :loading="confirmLoading">导入</a-button>-->
<!--        </el-upload>-->

        <a-upload style="margin-left: 8px;float: right;margin-right: 5px" name="file" :showUploadList="false"
                  :multiple="false"
                  :customRequest="importExcel"
                  :action="importExcelUrl" @change="handleImportExcel">
<!--          <a-button type="primary" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;margin-right: 5px" :loading="confirmLoading">导入</a-button>-->
          <a-button type="primary" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;margin-right: 5px" :loading="confirmLoading">导入</a-button>
        </a-upload>

        <a-button type="primary" @click="exportExcel" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;margin-right: 5px">导出</a-button>

        <a-button type="primary" @click="clean_alldata" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;margin-right: 5px;">清空</a-button>

<!--        <a-menu-item style="float: right;margin-right: 5px;">-->
<!--          <a-popconfirm title="清空数据会将所有定制项和参数以及关联的互斥和撞色一并清空，确认立即执行吗？" @confirm="() => clean_alldata()">-->
<!--            <a-button type="primary" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;">清空</a-button>-->
<!--          </a-popconfirm>-->
<!--        </a-menu-item>-->

      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.img)" icon="img"/>
          </div>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <div align="center" style="align-content: center;margin-left: 30px;">
          <a @click="add_categoryCanshu(record)" style="float: left;margin-left: 10px;font-size: 14px;color: #d29328;">编辑</a>
           <a-menu-item style="margin-left: 10px;float: left;margin-top: 0px;">
            <a-popconfirm title="确定删除该参数吗?" @confirm="() => delete_dingzhi_canshu(record.id)">
              <a style="font-size: 14px;color: #d29328;">删除</a>
            </a-popconfirm>
          </a-menu-item>
          </div>
        </span>
      </a-table>
    </div>

    <EditDingzhiModule ref="modalForm" @ok="modalFormOk"></EditDingzhiModule>
    <AddDingzhiCanshuModule ref="modalForm2" @ok="modalFormOk"></AddDingzhiCanshuModule>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {putAction,getFileAccessHttpUrl} from '@/api/manage';
  import JDate from '@/components/jeecg/JDate.vue'
  import '@/assets/less/TableExpand.less'
  import EditDingzhiModule from './modules/EditDingzhiModule'
  import AddDingzhiCanshuModule from './modules/AddDingzhiCanshuModule'
  import { httpAction, postAction, getAction } from '@/api/manage'

  export default {
    name: "categoryinfo",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      EditDingzhiModule,
      AddDingzhiCanshuModule
    },
    data () {
      return {
        description: 'categoryinfo管理页面',
        select_topcategory:'请选择定制项',//选中的定制项id
        dingzhiName:'',//定制项名称
        dingzhiId:'',//定制项id
        dingzhiXu:'',//定制项序号
        dingzhiCode:'',
        dingzhiTime:'',
        dingzhiRemark:'',
        categoryList: [],
        select_dingzhi:[],//选中的定制项
        confirmLoading:false,
        // 表头
        columns: [
          // {
          //   title: '序号',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'序号',
            align:"center",
            dataIndex: 'numbers'
          },
          {
            title:'参数名称',
            align:"center",
            dataIndex: 'categoryName'
          },
          {
            title:'编号',
            align:"center",
            dataIndex: 'categoryCode'
          },
          {
            title:'排序',
            align:"center",
            dataIndex: 'numbers',
          },
          {
            title: '图片',
            align: "center",
            width: 150,
            dataIndex: 'img',
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title:'添加时间',
            align:"center",
            dataIndex: 'createTime',
          },
          // {
          //   title:'团订售价',
          //   align:"center",
          //   dataIndex: 'teamPrice2',
          // },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width: 200,
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/admin/parameter/test_dignzhipartmer?topcategory_id="+this.$route.query.category_id+"&module_id="+this.dingzhiId,
          query_dingzhiList:"/admin/parameter/query_dingzhiBypingleiId",
          query_dingzhiDetail:"/admin/parameter/query_dingzhiBydingzhiId",
          delete_dingzhi:"/admin/parameter/delete_dingzhi",
          delete_canshu:"/admin/parameter/delete_dingzhi_canshu",
          exportExcel_canshu:"/admin/ExportData/exportCategory",
          importExcel_canshu:"/admin/ImportData/importCategoryExcel",
          clean_allcanshu:"/admin/ExportData/clean_all_categoryData",
        }
      }
    },
    created () {
      // alert(this.$route.query.category_id)
      this.showdingzhi_list();
    },
    methods: {
      /**
       * 导出
       */
      exportExcel(){
        let url = getFileAccessHttpUrl(window._CONFIG['domianURL'] + "/admin/ExportData/exportCategory?category_id=" + this.$route.query.category_id)
        window.open(url);
      },
      /**
       * 导入数据
       */
      importExcel(param){
        this.confirmLoading = true;
        let formData = new FormData()
        formData.append('file', param.file);
        formData.append('category_id', this.$route.query.category_id);
        postAction(this.url.importExcel_canshu,formData).then((res)=>{
          // console.log(res)
          if(res.code=='0'){
            this.confirmLoading = false;
            this.$message.success(res.msg);
            this.showdingzhi_list();
            this.loadData();
          }else {
            this.confirmLoading = false;
            this.$message.error(res.msg);
          }
        });
      },
      /**
       * 清空数据
       */
      clean_alldata(){
        this.$confirm('清空数据会将所有定制项和参数以及关联的互斥和撞色一并清空且不能恢复，请慎重！确认立即执行吗?', '温馨提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.confirmLoading = true;
          let formData = new FormData()
          formData.append('category_id', this.$route.query.category_id);
          postAction(this.url.clean_allcanshu,formData).then((res)=>{
            if(res.code=='0'){
              this.confirmLoading = false;
              this.$message.success(res.msg);
              this.categoryList=[]
              this.select_topcategory='请选择定制项';//选中的定制项id
              this.showdingzhi_list();
              this.loadData();
            }else {
              this.confirmLoading = false;
              this.$message.error(res.msg);
            }
          });
        }).catch(() => {
          this.confirmLoading = false;
        });
      },
      showdingzhi_list() {//查询定制项列表
        let params = {category_id:this.$route.query.category_id};
        getAction(this.url.query_dingzhiList,params).then((res)=>{
          if(res.success){
            this.categoryList = res.result;
            // this.select_dingzhi = res.result;
            let params = {dinghzi_id:res.result[0].id};
            getAction(this.url.query_dingzhiDetail,params).then((res)=>{
              // console.info(res);
              if(res.success){
                this.dingzhiName=res.result.parameter;
                this.dingzhiId=res.result.id;
                this.select_topcategory = res.result.id;
                this.dingzhiXu=res.result.numbers;
                this.dingzhiCode=res.result.code;
                this.dingzhiTime=res.result.createTime;
                this.dingzhiRemark=res.result.remark;

                this.url.list = "/admin/parameter/test_dignzhipartmer?topcategory_id="+this.$route.query.category_id+"&module_id="+res.result.id
                this.loadData();
              }else {
                this.$message.error("查询失败1");
              }
            });
          }else {
            this.dingzhiName='暂无';
            this.dingzhiXu='暂无';
            this.dingzhiCode='暂无';
            this.dingzhiTime='暂无';
            this.dingzhiRemark='暂无';
          }
        });
      },
      change_dingzhiInfo(){//查询定制项详情
        let params = {dinghzi_id:this.select_topcategory};
        getAction(this.url.query_dingzhiDetail,params).then((res)=>{
          if(res.success){
            // alert(res.result.id);
              this.select_dingzhi = res.result;
              this.dingzhiName=res.result.parameter;
              this.dingzhiId=res.result.id;
              this.dingzhiXu=res.result.numbers;
              this.dingzhiCode=res.result.code;
              this.dingzhiTime=res.result.createTime;
              this.dingzhiRemark=res.result.remark;
              this.url.list = "/admin/parameter/test_dignzhipartmer?topcategory_id="+this.$route.query.category_id+"&module_id="+res.result.id
              this.loadData();
          }else {
            // this.$message.error("查询失败33");
          }
        });
      },
      delete_dingzhi(id){//删除
        let params = {dingzhi_id:id};
        httpAction(this.url.delete_dingzhi,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.categoryList=[];
            this.showdingzhi_list();
          }else {
            this.$message.error(res.message);
          }
        });
      },
      delete_dingzhi_canshu(id){//删除参数
        let params = {canshu_id:id};
        httpAction(this.url.delete_canshu,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.loadData();
          }else {
            this.$message.error(res.message);
          }
        });
      },

      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      add_category(record) {
        if(record=="0"){
          this.$refs.modalForm.title = "新增定制项";
        }else {
          this.$refs.modalForm.title = "编辑定制项";
        }
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.disableSubmit = true;
      },
      add_categoryCanshu(record){//添加参数
        if(record.id!=null){
          this.$refs.modalForm2.title = "编辑参数";
        }else {
          this.$refs.modalForm2.title = "新增参数";
        }
        this.$refs.modalForm2.edit(record);
        this.$refs.modalForm2.disableSubmit = true;
      },

      goto_setcategory_home(categoryid){
        this.$router.push({path:'/setcategory/chanshu',query: {id:categoryid}})
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>